<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Login Page</title>
    <!-- 标 题 图 标 -->
    <link rel="icon" href="myimgs/title.ico" type="image/x-icon">
    <!-- 样 式 文 件 -->
    <link rel="stylesheet" href="component/pear/css/pear.css"/>
    <link rel="stylesheet" href="admin/css/other/login.css"/>
</head>
<!-- 代 码 结 构 -->
<body background="admin/images/background.svg" style="background-size: cover;">
<form class="layui-form" action="javascript:void(0);">
    <div class="layui-form-item">
        <img class="logo" src="admin/images/logo.png"/>
        <div class="title">Metric Hall Backstage</div>
        <div class="desc">
            Welcome To The Magic Castle
        </div>
    </div>
    <div class="layui-form-item">
        <input id="username" name="username" placeholder="账 户 : admin " lay-verify="required" hover
               class="layui-input"/>
    </div>
    <div class="layui-form-item">
        <input id="password" name="password" placeholder="密 码 : admin " lay-verify="required" hover
               class="layui-input"/>
    </div>
    <!-- todo 验证码机制和Token持久化-->
    <div class="layui-form-item">
        <input class="code layui-input layui-input-inline" hover id="captcha" name="captcha" placeholder="验证码 : "/>
        <img class="codeImage" id="captchaImage" src="/system/captcha/generate"/>
    </div>
    <!--    <div class="layui-form-item">-->
    <!--        <input placeholder="验证码 : " hover lay-verify="required" class="code layui-input layui-input-inline"/>-->
    <!--        <img src="admin/images/captcha.gif" class="codeImage"/>-->
    <!--    </div>-->
    <!--    <div class="layui-form-item">-->
    <!--        <input type="checkbox" name="" title="记住密码" lay-skin="primary" checked>-->
    <!--    </div>-->
    <div class="layui-form-item">
        <button type="button" class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
            登 入
        </button>
    </div>

</form>


<!-- 资 源 引 入 -->
<script src="component/layui/layui.js"></script>
<script src="component/pear/pear.js"></script>
<script>
    layui.use(['form', 'jquery', 'layer', 'button', 'popup'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let button = layui.button;
        let popup = layui.popup;
        let captchaPath = "/system/captcha/generate";

        // 表单验证
        form.verify({
            username: function (value) {
                if (value.length <= 0) {
                    return '用户名不能为空';
                }
            },
            password: function (value) {
                if (value.length <= 0) {
                    return '密码不能为空';
                }
            },
            captcha: function (value) {
                if (value.length <= 0) {
                    return '验证码不能为空';
                }
                if (value.length !== 4) {
                    return '请输入正确格式的验证码';
                }
            }
        })
        // 登 录 提 交
        form.on('submit(login)', function (data) {
            /// 登录
            $.ajax({
                url: '/api/login',
                type: 'post',
                content_type: 'application/x-www-form-urlencoded',
                dataType: 'text',
                data: {
                    username: $('#username').val(),
                    password: $('#password').val(),
                    captcha: $('#captcha').val(),
                },
                success: response => {
                    let res = JSON.parse(response);
                    if (res.code === 0) {
                        /// 存储jwt
                        document.cookie = "jwt=" + res.data.jwt;
                        $.ajax({
                            url: '/index.html',
                            type: 'get',
                            success: res => {
                                /// 成功动画
                                button.load({
                                    elem: '.login',
                                    time: 1500,
                                    done: function () {
                                        popup.success("登录成功", function () {
                                            location.href = '/index.html';
                                        });
                                    }
                                })
                            },
                            error: e => {
                                if (e.responseJSON.code === 5001) {
                                    location.href = '/403.html';
                                }
                            }
                        })
                    } else {
                        /// 失败动画
                        button.load({
                            elem: '.login',
                            time: 1500,
                            done: function () {
                                popup.failure(res.message, function () {
                                    location.href = "/login.html"
                                    document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
                                });
                            }
                        })
                    }
                },
                error: e => {
                    console.log(e);
                }
            })
            return false;
        });
        $("#captchaImage").click(function () {
            document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
        })
        setInterval(function () {
            document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
        }, 30 * 1000);
    })

</script>
</body>
</html>
